<template>
  <div>
    <div class="search-container">
      <!-- 搜索 -->
      <div class="search">
        <el-button class="search-button" type="info">搜索</el-button>
        <el-input v-model="input" class="search-input" placeholder="儿童姓名" />
      </div>
      <div class="assessment">
        创建评估:
        <el-tree-select
          v-model="value"
          :data="data"
          :render-after-expand="false"
          class="tree-select"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="assessment">
        筛查评估:
        <el-tree-select
          v-model="value"
          :data="data"
          :render-after-expand="false"
          class="tree-select"
        />
      </div>
    </div>
    <!-- 全部 -->
    <div class="operation">
      <el-button class="operation-left" type="text"> 全部 </el-button>
      <el-button class="operation-right" type="text"> 删除 </el-button>
    </div>
    <!-- 表单 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="创建时间"
          property="date"
          width="120"
          align="center"
        >
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="120"
          align="center"
        />
        <el-table-column label="评估项目" property="project" align="center" />

        <el-table-column label="查看评估" align="center">
          <template #default="scope">
            <el-button @click="openDialog(scope.row)" type="text"
              >查看评估</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="评估报告" align="center">
          <template #default="scope">
            <el-image
              style="width: 120px; height: 100px"
              :src="scope.row.report"
              preview-teleported="true"
              :preview-src-list="[scope.row.report]"
              :initial-index="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="danger" style="" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="100"
      layout="total, prev, pager, next, jumper"
      style="margin-top: 20px"
    />
    </div>
    <el-dialog v-model="dialogTableVisible" title="评估详情" width="800">
      <div>
        <p><strong>评估报告:</strong> {{ selectedRow.report }}</p>
        <p><strong>电话:</strong> {{ selectedRow.phone }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 搜索栏
const value = ref();
const data = [
  {
    value: "1",
    label: "偏好物评估",
  },
  {
    value: "2",
    label: "技能评估",
    
  },
  {
    value: "3",
    label: "障碍评估",
  },
  {
    value: "3-2",
    label: "感情评估",
  },
];
// 创建评估
const handleNodeClick = (node,e) => {
  console.log(node.label)
  dialogTableVisible.value = true;
  console.log(12312);
};
// 表单
const dialogTableVisible = ref(false);
const selectedRow = ref({});
// 打开对话框并设置选中的行数据
const openDialog = (row) => {
  selectedRow.value = row;
  dialogTableVisible.value = true;
  console.log(11111);
  // 在这里设置对话框可见性
};
const tableData = ref([
  {
    id: "1",
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    report:
      "https://haowallpaper.com/link/common/file/previewFileImg/15662351096189248",
    project: "AABB工程项目",
  },
  {
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "学生",
    report:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    project: "CCBB工程项目",
  },
  {
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "学生",
    report:
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    project: "DDBB工程项目",
  },
]);
// 分页
const currentPage = ref(1);
const pageSize = ref(5);
const handlePageChange = (page) => {
  currentPage.value = page;
};
const handleSearch = () => {
  currentPage.value = 1;
};
</script>

<style  scoped>
/* 搜索栏 */
.search-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-button{
  height: 38px;
}

.search-input {
  width: 240px;
}

.assessment {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tree-select {
  width: 240px;
}
/* 全部 */
.operation {
  display: flex;
  justify-content: flex;
  align-items: center;
  padding: 10px;
  background-color: #f1f1f1;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.operation-left,
.operation-right {
  font-size: 16px;
  transition: color 0.3s;
}

.operation-left:hover,
.operation-right:hover {
  color: red;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.ewq {
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>